import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    DeviceEventEmitter,
    Alert, Modal
} from 'react-native';
import Swiper from 'react-native-swiper';
import { MarqueeHorizontal, MarqueeVertical } from 'react-native-marquee-ab';
import Styles from './Styles';
import Football from "../../utils/Football";
import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import DLTREQUEST from "../../pages/Game/DLTGame/DLTREQUEST";

const { width, height } = Dimensions.get('window')

export default class BetOrder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            toastModelVisible: false,
            message: '',
            postBetData: {},
            betAmount: 0,
            dikouAmount: 0,
            payAmount: 0,
            isLoading: false,
        };
        this.coin = 0;
        this.gold = 0;
        this.type = 1;//1下单2跟单
        this.game_model = null;
    }
    static navigationOptions = {
        title: '支付',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
            paddingTop: 18,
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }
    componentWillMount() {
        //组件将要被加载到视图之前调用

    }
    componentDidMount() {
        const { navigation } = this.props;
        this.type = navigation.getParam("type");
        let postBetData = navigation.getParam("postBetData");
        this.game_model = navigation.getParam("game_model");
        let betAmount = 0, dikouAmount = 0, payAmount = 0;
        switch (this.game_model) {
            case 'FootballGame':
                if (this.type == 1) {
                    for (let i = 0; i < postBetData.betRecords.length; i++) {
                        betAmount += postBetData.betRecords[i].multNum * Football.PRICE;
                    }
                } else if (this.type == 2) {
                    betAmount = (postBetData.singlecoin * postBetData.Mult).toFixed(2);
                }
                break;
            case 'DLTGame':
                betAmount = postBetData.betAmount;
                break;
        }
        Httpc.get(REQUEST.GetUserMoney, { token: Ugame.info.Token }, (res) => {
            if (res.StatusCode == 1) {
                let coin = res.Data.coin;
                this.coin = res.Data.coin;
                this.gold = res.Data.gold;
                let dikouAmount = 0;
                if (betAmount >= coin) {
                    dikouAmount = coin;
                } else {
                    dikouAmount = betAmount;
                }
                if (betAmount > coin) {
                    Alert.alert('提示', '余额不足，请充值后再进行投注！',
                        [
                            { text: "确认", onPress: this.do_cancel_alert },
                        ]
                    );
                }
                this.setState({
                    postBetData: postBetData,
                    betAmount: betAmount,
                    dikouAmount: dikouAmount,
                    payAmount: betAmount - dikouAmount,
                })
            }
        })
    }
    componentWillUnmount() {

    }
    do_cancel_alert = () => {
        this.props.navigation.navigate('ChongZhi', {
            gold: (Number(this.coin) + Number(this.gold)).toFixed(2)
        });
    }
    do_bet_order = () => {
        if (this.state.payAmount > 0) {
            Alert.alert('提示', '余额不足，请充值后再进行投注！',
                [
                    { text: "确认", onPress: this.do_cancel_alert },
                ]
            );
            return;
        }
        let { isLoading } = this.state;
        if (isLoading === true) {
            return;
        }
        this.setState({
            isLoading: true
        }, () => {
            const navigation = this.props.navigation;
            let postBetData = this.state.postBetData;
            let bet_url = null;
            let follow_url = null;
            switch (this.game_model) {
                case 'FootballGame':
                    bet_url = REQUEST.FootballSetInsert;
                    follow_url = REQUEST.SetInsert;
                    break;
                case 'DLTGame':
                    bet_url = DLTREQUEST.DLTSetInsert;
                    break;
            }
            if (this.type == 1) {
                Httpc.postQueryJson(bet_url, postBetData, function (res) {
                    this.setState({
                        isLoading: true
                    }, () => {
                        if (res.StatusCode != 1) {
                            this.do_toast(res.Message, 1000, () => {
                            });
                            return;
                        } else {
                            DeviceEventEmitter.emit('updateclearbet', {});
                            navigation.navigate('BetSuccess', {
                                game_model: this.game_model
                            });
                        }
                    });
                }.bind(this));
            } else if (this.type == 2) {
                Httpc.postQueryJson(follow_url, postBetData, function (res) {
                    this.setState({
                        isLoading: true
                    }, () => {
                        if (res.StatusCode != 1) {
                            this.do_toast(res.Message, 1000, () => {
                            });
                            return;
                        } else {
                            navigation.navigate('BetSuccess', {
                                game_model: 'FollowList'
                            });
                        }
                    });

                }.bind(this));
            }
        });
    }
    do_toast = (str, time, func) => {
        this.setState({
            message: str,
            toastModelVisible: true
        });
        setTimeout(() => {
            this.setState({
                message: '',
                toastModelVisible: false
            });
            func();
        }, time);
    }
    toast = () => {
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.toastModelVisible}
                onRequestClose={() => {
                    this.setState({
                        toastModelVisible: false
                    });
                }}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'center', position: 'absolute', bottom: 100, width: width }}>
                    <Text style={{ backgroundColor: 'rgba(0,0,0,0.7)', color: '#ffffff', borderRadius: 10, height: 40, lineHeight: 40, paddingLeft: 20, paddingRight: 20 }}>{this.state.message}</Text>
                </View>
            </Modal>
        );
    }
    renderLoadingView() {
        return (
            <View style={{
                flex: 1, justifyContent: 'center', flexDirection: 'row',
                justifyContent: 'space-around',
                padding: 10,
                zIndex: 999,
                position: 'absolute',
                top: 0,
                width: width,
                height: height, backgroundColor: 'rgba(0,0,0,0.2)'
            }}>
                <ActivityIndicator size="large" color="#d0162e" />
            </View>
        );
    }
    render() {
        let { isLoading, betAmount, dikouAmount, payAmount } = this.state;
        return (
            <View style={Styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                {isLoading ?
                    this.renderLoadingView() :
                    null
                }
                <View style={{
                    backgroundColor: '#ffffff', height: 40, flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center', paddingLeft: 16, paddingRight: 16, marginTop: 10, marginBottom: 10
                }}>
                    <Text>竞彩足球混合</Text>
                    <Text style={{ color: '#d0162e' }}>{betAmount}元</Text>
                </View>
                <View style={{
                    backgroundColor: '#ffffff', height: 40, flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center', paddingLeft: 16, paddingRight: 16, marginBottom: 1
                }}>
                    <Text>余额抵扣</Text>
                    <Text style={{ color: '#d0162e' }}>{dikouAmount}元</Text>
                </View>
                <View style={{
                    backgroundColor: '#ffffff', height: 40, flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center', paddingLeft: 16, paddingRight: 16
                }}>
                    <Text>还需支付</Text>
                    <Text style={{ color: '#d0162e' }}>{payAmount}元</Text>
                </View>
                <View style={{ margin: 16, borderRadius: 5, overflow: 'hidden' }}>
                    <Button
                        onPress={this.do_bet_order}
                        title="确认支付"
                        color="#d0162e"
                    />
                </View>
                {this.toast()}
            </View>
        )
    }



}
